import React,{useState,useEffect,createContext}  from 'react'
import { Card, Input, Icon,Button ,Spin,message  } from 'antd'

import 'antd/dist/antd.css'
import '../static/css/Login.css'
import axios from 'axios'
import servicePath from '../config/apiUrl'

const openIdContext = createContext()

function Login(props){

    const [userName , setUserName] = useState('')
    const [password , setPassword] = useState('')
    const [isLoading, setIsLoading] = useState(false)  //防止重复提交

    // useEffect(()=>{

    // },[])

    const checkLogin = ()=>{
        setIsLoading(true)

        if(!userName){
            message.error('Password Can Not Empty!!!')
            setTimeout(()=>{
                setIsLoading(false)
            },500)
            return false
        }else if(!password){
            message.error('Username Can Not Empty!!!')
            setTimeout(()=>{
                setIsLoading(false)
            },500)
            return false
        }
        let dataProps = {
            'userName':userName,
            'password':password
        }
        axios({
            method:'post',
            url:servicePath.checkLogin,
            data:dataProps,
            withCredentials: true
        }).then(
           res=>{
                setIsLoading(false)
                if(res.data.data==='登录成功'){
                    localStorage.setItem('openId',res.data.openId)
                    props.history.push('/index')
                }else{
                    message.error('用户名密码错误')
                }
           }
        )

        setTimeout(()=>{
            setIsLoading(false)
        },1000)
    }

 return (
<div className='login-div'>

<Spin tip="Loading..." spinning={isLoading}>
    <Card  title=" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Aaron の 博客系统 の 后台" 
               bordered={true} style={{ width: 400 }} >
          
            <Input id='userName'   
                size='large'
                placeholder="Enter Your Username" 
                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)'  }} />}
                onChange={(e)=>{setUserName(e.target.value)}}
                />
                
                    <br/><br/>
    
        <Input
                id='password'
                size='large'
                prefix={<Icon type="eye" style={{ color: 'rgba(0,0,0,.25)' }} />}
                type="password"
                placeholder="Enter Your Password"
                onChange={(e)=>{setPassword(e.target.value)}}
                />

                <br/><br/>
               
                <Button type="primary" size="large" block onClick={checkLogin} className='login-form-button'>
                    登录  </Button>
    </Card>
</Spin>    
    
</div> 
      )
    }


export default Login





